<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>




  


    <!-- 重要：a-scene  是 场景载体 -->
    <a-scene>
      <a-assets>
        <img id="testImg" src="" alt="">
      </a-assets>
        <!-- 重要：
          depth 是厚度 
          segments-radial 是边数
          open-ended是 true 把顶面地面都去掉
          里面嵌套就是相对定位了
          rotation 是右手法则 正轴的旋转 
          src 纹理材质的地址,直接写也可以但是最好用a-dassets 做管理
          normal-map 法线贴图的作用是增加深度 和光照反馈细节
        -->
      <a-box 
       roughness="0.9"
        src=""
        position="0 1.5 -2"
        rotation="0 0 0" 
        color="rgba(200,200,200)"
        height="1"
        width="1.5"
        depth="1"
        scale="1 1 1"
        normal-map="#testImg"
        normal-texture-repeat="1 1"
        animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; "
       >
      
      <a-circle 
      color="rgba(200,200,0)"
      position="0 0 0.11"
      side="double"
      
      ></a-circle>
      
      </a-box>
      
      
      
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <!-- <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> -->
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>

      
    </a-scene>
  </body>
</html>